<template>
  <div>
    <select class="form-control" v-model="channel" @change="changed">
      <option v-for="option in this.channels" v-bind:value="option.id">{{ option.name }}</option>
    </select>
  </div>
</template>

<script>
// import VueResource from 'vue-resource'
export default {
  name: 'Channel',
  props: ['selectedChannel', 'withUnlimit'],
  components: {
    // VueResource
  },
  data: function() {
    return {
      channel: this.selectedChannel,
      channels: []
    }
  },
  methods: {
    loaddata: function() {
      //this.$http.get('/data/channels.json').then(response => {
      // console.log('channels:' + JSON.stringify(response.body))

      if (this.withUnlimit) {
        this.channels = [{ id: -1, name: '不限' }]
        this.channels = this.channels.concat(this.$store.state.sysconfigs.channels)
      }
      else {
        this.channels = this.$store.state.sysconfigs.channels
      }
      // this.selectedChannel = this.channels[0].id
      // }, response => {
      //   console.log('failed:' + response.body)
      // })
    },
    changed: function(ele) {
      this.$emit('channelchanged', this.channel)
    }
  },
  created: function() {
    this.loaddata()
  }
}
</script>
